<template>
    <div class="btn" v-show="showBackTop">
        <a-button class="backTop" size="large" shape="circle" @click="backTop" :icon="h(ToTopOutlined)" />
    </div>
</template>

<script setup lang="ts">
import { h, nextTick, onBeforeUnmount, ref } from 'vue'
import { ToTopOutlined } from "@ant-design/icons-vue"
import _ from 'lodash'
const props = defineProps(['dom'])
const showBackTop = ref(false)
const backTop = () => {
    props.dom.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}
const showBtn = () => {
    const distanceTop = props.dom.scrollTop
    showBackTop.value = distanceTop > 200 ? true : false
}

const scrollListener = _.throttle(showBtn, 500)

nextTick(() => {
    props.dom.addEventListener('scroll', scrollListener);
})

onBeforeUnmount(() => {
    props.dom.removeEventListener('scroll', scrollListener);
})  
</script>

<style scoped lang="scss">
.btn {
    position: fixed;
    z-index: 999;
    bottom: 50px;
    right: 50px;

    .backTop {
        transition: all .5s;
        box-shadow: 0px 0px 10px white;

        &:hover {
            background-color: $primary;
            color: white;
        }
    }
}
</style>
